<template>
  <teleport to="body">
    <div v-if="visible" class="global-img-dialog">
      <img :src="imageUrl" class="dialog-image" @click="handleClickOutside" />
    </div>
  </teleport>
</template>

<script setup>
import { ref } from 'vue'

// 必须声明响应式变量
const visible = ref(false)
const imageUrl = ref('')
let timer = null

// 定义核心方法
const show = (url) => {
  imageUrl.value = url
  visible.value = true
  timer = setTimeout(hide, 5000)
}

const hide = () => {
  visible.value = false
  clearTimeout(timer)
  timer = null
}

const handleClickOutside = () => {
  if (visible.value) hide()
}

// 必须暴露方法
defineExpose({ show })
</script>

<style scoped>
.global-img-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.7);
}

.dialog-image {
  max-width: 90%;
  max-height: 80vh;
  border-radius: 8px;
}
</style>